import React, { Component } from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import { getUsersCountApi ,getOwnersCountApi} from "../apis/usersApi"
import { getAllCarApi } from "../apis/carApi"

export default class Home extends Component {
    state = {
        kinds: ["好评", "中评", "差评"],
        barSeriesData: [0, 0, 0],
        pieSiderData: [],
        carData:[0,0,0,0],
        pscarData:[],
        ownersData:[0,0,0,0],
        psownerData:[]
    }
    //获得评论的数据
    componentDidMount = async () => {
        await this.getUsersCount();
        await this.getAllCar();
        await this.getOwnersCount();
        this.initBarChart();//初始化柱状图
        // this.initpieChart();//初始化饼状图
    }
    //获得所有用户的数据
    getUsersCount = async () => {
        const data = await getUsersCountApi();
        console.log("data", data);
        const barSeriesData = [data["第一季度"], data["第二季度"], data["第三季度"], data["第四季度"]];
        const pieSiderData = [
            { value: data["第一季度"], name: '人数' },
            { value: data["第二季度"], name: '人数' },
            { value: data["第三季度"], name: '人数' },
            { value: data["第四季度"], name: '人数' },
        ]
        // console.log("sider", barSeriesData);
        this.setState({ barSeriesData, pieSiderData });
    }
    getAllCar = async () => {
        const data = await getAllCarApi();
        console.log("data", data);
        const carData = [data["第一季度"], data["第二季度"], data["第三季度"], data["第四季度"]];
        const pscarData = [
            { value: data["第一季度"], name: '第一季度' },
            { value: data["第二季度"], name: '第二季度' },
            { value: data["第三季度"], name: '第三季度' },
            { value: data["第四季度"], name: '第四季度' },
        ]
        // console.log("sider", barSeriesData);
        this.setState({ carData, pscarData });
    }
    getOwnersCount = async ()=> {
        const data = await getOwnersCountApi();
        console.log("data", data);
        const ownersData = [data["第一季度"], data["第二季度"], data["第三季度"], data["第四季度"]];
        const psownerData = [
            { value: data["第一季度"], name: '人数' },
            { value: data["第二季度"], name: '人数' },
            { value: data["第三季度"], name: '人数' },
            { value: data["第四季度"], name: '人数' },
        ]
        // console.log("sider", barSeriesData);
        this.setState({ ownersData, psownerData });
    }
    //初始化柱状图的数据
    initBarChart = () => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
            title: { text: '用户增长柱状图' },
            tooltip: {},
            xAxis: {
                data: ["第一季度", "第二季度", "第三季度", "第四季度"]//横轴的数据
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '人数',
                type: 'bar',
                // data: [5, 1, 4],
                data: this.state.barSeriesData,
                //设置柱状图的颜色
                itemStyle: {
                    normal: {
                        //定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10', '#FCC555'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',// formatter: '{c}'                     
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                barWidth: 60,//设置柱的宽度
            }]
        });
        var myCar = echarts.init(document.getElementById('main1'));
        // 绘制图表
        myCar.setOption({
            title: { text: '车辆增长柱状图' },
            tooltip: {},
            xAxis: {
                data: ["第一季度", "第二季度", "第三季度", "第四季度"]//横轴的数据
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '车辆数',
                type: 'bar',
                // data: [5, 1, 4],
                data: this.state.carData,
                //设置柱状图的颜色
                itemStyle: {
                    normal: {
                        //定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10', '#FCC555'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',// formatter: '{c}'                     
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                barWidth: 60,//设置柱的宽度
            }]
        });
        var myOwner = echarts.init(document.getElementById('main2'));
        // 绘制图表
        myOwner.setOption({
            title: { text: '车主增长柱状图' },
            tooltip: {},
            xAxis: {
                data: ["第一季度", "第二季度", "第三季度", "第四季度"]//横轴的数据
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '人数',
                type: 'bar',
                // data: [5, 1, 4],
                data: this.state.ownersData,
                //设置柱状图的颜色
                itemStyle: {
                    normal: {
                        //定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function (params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B', '#B5C334', '#FCCE10', '#FCC555'
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',// formatter: '{c}'                     
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                barWidth: 60,//设置柱的宽度
            }]
        });
    }

    render() {
        return (
            <div style={{display:"flex"}}>
                <div style={{ clear: 'both' ,width: 400, height: 400,}}>
                    <div id="main" style={{ width: 400, height: 400, float: 'left', marginRight: 120 }}></div>
                </div>
                <div style={{ clear: 'both',width: 400, height: 400, }}>
                    <div id="main1" style={{ width: 400, height: 400, float: 'left', marginRight: 120 }}></div>
                </div>
                <div style={{ clear: 'both',width: 400, height: 400, }}>
                    <div id="main2" style={{ width: 400, height: 400, float: 'left', marginRight: 120 }}></div>
                </div>
            </div>
        )
    }
}
